<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>QuartzDemo</title>
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.0.5/lib/theme-chalk/index.css">
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="http://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.js"></script>
	<script src="https://unpkg.com/element-ui@2.0.5/lib/index.js"></script>

	<style>
		#top {
			background: #20A0FF;
			padding: 5px;
			overflow: hidden
		}
	</style>

</head>

<body>
	<div id="test">

		<div id="top">
			<el-button type="text" @click="search" style="color:white">查询</el-button>
			<el-button type="text" @click="handleadd" style="color:white">添加</el-button>
			</span>
		</div>

		<br />

		<div style="margin-top:15px">

			<el-table ref="testTable" :data="tableData" style="width:100%" border>
				<el-table-column prop="job_NAME" label="任务名称" sortable show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="job_GROUP" label="任务所在组" sortable show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="job_CLASS_NAME" label="任务类名" sortable show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="trigger_NAME" label="触发器名称" sortable show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="trigger_GROUP" label="触发器所在组" sortable show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="cron_EXPRESSION" label="表达式" sortable>
				</el-table-column>
				<el-table-column prop="time_ZONE_ID" label="时区" sortable>
				</el-table-column>
				<el-table-column label="操作">
					<template scope="scope">
						<el-button size="small" type="warning" @click="handlePause(scope.$index, scope.row)">暂停
						</el-button>
						<el-button size="small" type="info" @click="handleResume(scope.$index, scope.row)">恢复
						</el-button>
						<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
						</el-button>
						<el-button size="small" type="success" @click="handleUpdate(scope.$index, scope.row)">修改
						</el-button>
						<el-button size="small" type="info" @click="handleExecuteOnce(scope.$index, scope.row)">立即执行一次
						</el-button>
					</template>
				</el-table-column>
			</el-table>

			<div align="center">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pagesize"
					layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
				</el-pagination>
			</div>
		</div>

		<el-dialog title="添加任务" :visible.sync="dialogFormVisible">
				在添加新的任务的时候，填写任务名称时一定要输入Job类的完整路径
			<el-form :model="form">
				<el-form-item label="任务名称" label-width="120px" style="width:35%">
					<el-input v-model="form.jobName" auto-complete="off"  width="200"></el-input>					
				</el-form-item>
				<el-form-item label="任务分组" label-width="120px" style="width:35%">
					<el-input v-model="form.jobGroup" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="表达式" label-width="120px" style="width:35%">
					<el-input v-model="form.cronExpression" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="add">确 定</el-button>
			</div>
		</el-dialog>

		<el-dialog title="修改任务" :visible.sync="updateFormVisible">
			<el-form :model="updateform">
				<el-form-item label="表达式" label-width="120px" style="width:35%">
					<el-input v-model="updateform.cronExpression" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="updateFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="update">确 定</el-button>
			</div>
		</el-dialog>

	</div>

	<footer align="center">
		<p>&copy; Quartz 任务管理</p>
	</footer>

	<script>
		var vue = new Vue({
			el: "#test",
			data: {
				//表格当前页数据
				tableData: [],

				//请求的URL
				url: 'job/queryjob',

				//默认每页数据量
				pagesize: 10,

				//当前页码
				currentPage: 1,

				//查询的页码
				start: 1,

				//默认数据总数
				totalCount: 1000,

				//添加对话框默认可见性
				dialogFormVisible: false,

				//修改对话框默认可见性
				updateFormVisible: false,

				//提交的表单
				form: {
					jobName: '',
					jobGroup: '',
					cronExpression: '',
				},

				updateform: {
					jobName: '',
					jobGroup: '',
					cronExpression: '',
				},
			},

			methods: {

				//从服务器读取数据
				loadData: function (pageNum, pageSize) {
					this.$http.get('job/queryjob?' + 'pageNum=' + pageNum + '&pageSize=' + pageSize).then(function (res) {
						console.log(res)
						this.tableData = res.body.JobAndTrigger.list;
						this.totalCount = res.body.number;
					}, function () {
						console.log('failed');
					});
				},

				//单行删除
				handleDelete: function (index, row) {
					this.$http.post('job/deletejob', {"jobClassName": row.job_NAME, "jobGroupName": row.job_GROUP}, {emulateJSON: true}).then(function (res) {
						this.loadData(this.currentPage, this.pagesize);
					}, function () {
						console.log('failed');
					});
				},

				//暂停任务
				handlePause: function (index, row) {
					this.$http.post('job/pausejob', {"jobClassName": row.job_NAME, "jobGroupName": row.job_GROUP}, {emulateJSON: true}).then(function (res) {
						this.loadData(this.currentPage, this.pagesize);
					}, function () {
						console.log('failed');
					});
				},

				//恢复任务
				handleResume: function (index, row) {
					this.$http.post('job/resumejob', {"jobClassName": row.job_NAME, "jobGroupName": row.job_GROUP}, {emulateJSON: true}).then(function (res) {
						this.loadData(this.currentPage, this.pagesize);
					}, function () {
						console.log('failed');
					});
				},

				//立即执行一次
				handleExecuteOnce: function (index, row) {
					this.$http.post('job/executeOnceJob', {"jobClassName": row.job_NAME, "jobGroupName": row.job_GROUP}, {emulateJSON: true}).then(function (res) {
						this.loadData(this.currentPage, this.pagesize);
					}, function () {
						console.log('failed');
					});
				},

				//搜索
				search: function () {
					this.loadData(this.currentPage, this.pagesize);
				},

				//弹出对话框
				handleadd: function () {
					this.dialogFormVisible = true;
				},

				//添加
				add: function () {
					this.$http.post('job/addjob', {"jobClassName": this.form.jobName, "jobGroupName": this.form.jobGroup, "cronExpression": this.form.cronExpression}, {emulateJSON: true}).then(function (res) {
						this.loadData(this.currentPage, this.pagesize);
						this.dialogFormVisible = false;
					}, function () {
						console.log('failed');
					});
				},

				//更新
				handleUpdate: function (index, row) {
					console.log(row)
					this.updateFormVisible = true;
					this.updateform.jobName = row.job_CLASS_NAME;
					this.updateform.jobGroup = row.job_GROUP;
				},

				//更新任务
				update: function () {
					this.$http.post
						('job/reschedulejob',
							{
								"jobClassName": this.updateform.jobName,
								"jobGroupName": this.updateform.jobGroup,
								"cronExpression": this.updateform.cronExpression
							}, {emulateJSON: true}
						).then(function (res) {
							this.loadData(this.currentPage, this.pagesize);
							this.updateFormVisible = false;
						}, function () {
							console.log('failed');
						});
				},

				//每页显示数据量变更
				handleSizeChange: function (val) {
					this.pagesize = val;
					this.loadData(this.currentPage, this.pagesize);
				},

				//页码变更
				handleCurrentChange: function (val) {
					this.currentPage = val;
					this.loadData(this.currentPage, this.pagesize);
				},
			},
		});

		//载入数据
		vue.loadData(vue.currentPage, vue.pagesize);
	</script>

</body>

</html>